<template>
    <div>
        <h1>登录或注册页面</h1>
        <el-form ref="form" :model="clientele" label-width="auto" :rules="rules">
            <el-form-item label="用户名" prop="name">
                <el-input v-model="clientele.name" show-message></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="clientele.password" type="password" show-password show-message></el-input>
            </el-form-item>
            <el-button type="success" round :disabled="canSubmit" @click="regist">注册</el-button>
            <el-button type="primary" round :disabled="canSubmit" @click="login">登录</el-button>
        </el-form>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name:'loginPage',
    data() {
        const checkOutData=(rule,value,callback)=>{
            if(value===''){
                this.canSubmit=true;
                callback(new Error('用户名和密码均不可为空'));
            }else if(this.clientele.name!==''&&this.clientele.password!==''){
                this.canSubmit=false;
                callback();
            }
        };
        return {
            canSubmit:true,
            clientele:{
                name:'',
                password:'',
            },
            rules:{
                name:[
                    {required: true, validator:checkOutData, trigger: 'blur'},
                ],
                password:[
                    {required: true, validator:checkOutData, trigger: 'blur'},
                ]
            }
        };
    },
    methods:{
        login(){
            axios({
                method:'post',
                url:'/clientele/loginClientele',
                data:this.clientele,
            }).then(
                response=>{
                    if(response.data.data===null){
                        alert('用户名或密码错误❌，请重新尝试');
                        this.clientele={
                            name:'',
                            password:'',
                        };
                    }else{
                        alert('登录成功✔');
                        localStorage.setItem("clientele",JSON.stringify(response.data.data));
                        this.$bus.$emit('clientele',response.data.data);
                        this.$router.push({name:'gameStore'});
                    }
                }
            )
        },
        regist(){
            axios({
                method:'post',
                url:'/clientele/registerClientele',
                data:this.clientele,
            }).then(
                response=>{
                    if(response.data.data){
                        alert('注册成功✔，状态已登录');
                        this.login();
                    }else{
                        alert('注册失败❌，用户名重复');
                        this.clientele={
                            name:'',
                            password:'',
                        };
                    }
                }
            )
        }
    }
}
</script>
<style scoped>
</style>